<template>
	<view class="picker-bottom-wrap a-fadeinB">
		<view class="picker-hd">
			<view class="cancle" @click="cancle">取消</view>
			<view class="confirm" @click="confirm">确定</view>
		</view>

		<view class="select-area-bar">
			<view class="label">已选择：</view>
			<view :class="['item',{'active':area_type==1}]" @click="changeArea(1)">{{params.province.name||'选择省'}}
			</view>
			<view :class="['item',{'active':area_type==2}]" v-if="params.city.show&&params.province.name" class="item"
				@click="changeArea(2)">{{params.city.name||'选择市'}}</view>
			<view :class="['item',{'active':area_type==3}]" v-if="params.city.name" class="item" @click="changeArea(3)">
				{{params.district.name||'选择区'}}</view>
		</view>

		<view class="area-list-wrap">
			<template v-if="area_type==1">
				<view class="item" v-for="(item,index) in provinces" :key="index"
					@click="selectArea(item.level,item.adcode,item.name)">
					<view class="name">{{item.name}}</view>
					<view v-if="item.name==params.province.name" class="iconfont icon-danxuanxuanzhong f-red"></view>
				</view>
			</template>
			<template v-if="area_type==2">
				<view class="item" v-for="(item,index) in citys" :key="index"
					@click="selectArea(item.level,item.adcode,item.name)">
					<view class="name">{{item.name}}</view>
					<view v-if="item.name==params.city.name" class="iconfont icon-danxuanxuanzhong f-red"></view>
				</view>
			</template>
			<template v-if="area_type==3">
				<view class="item" v-for="(item,index) in districts" :key="index"
					@click="selectArea(item.level,item.adcode,item.name)">
					<view class="name">{{item.name}}</view>
					<view v-if="item.name==params.district.name" class="iconfont icon-danxuanxuanzhong f-red"></view>
				</view>
			</template>

		</view>


	</view>
</template>

<script>
	export default {
		name: 'name',
		data() {
			return {
				area_type:1,  // 默认选择省份
				provinces:[],
				citys:[],
				districts:[], 
				isShowCity:true,
				params: {					
					province: {
						show:true,
						name: '',
						adcode: '',
						level: '',
					},
					city: {
						show:true,
						name: '',
						adcode: '',
						level: '',
					},
					district: {
						show:true,
						name: '',
						adcode: '',
						level: '',
					},
				}
			}
		},
		props: {
			selectData:{
				type:Object
			} 
		},
		async created() { 
			// 判断是否已选地区
			if(JSON.stringify(this.selectData) != '{}'){ 
				this.params=this.selectData; 
			} 
			this.provinces=await this.getArea('china','china'); 
		},
		methods:{
			// 获取省份列表
			getArea:async function(areaName,adcode){ 
				let res=await this.$api.ydc_api.getProvince({
					areaName: areaName,
					adcode: adcode
				})  
				console.log(res)
				if(res.data.ret==0){ 
					return res.data.data;
				}
			},
			
			changeArea:async function(type){
				this.area_type=type;
				if(type==1){
					this.provinces=await this.getArea('china','china');
				}else if(type==2){
					this.citys=await this.getArea(this.params.province.level,this.params.province.adcode);
				}else if(type==3){
					this.districts=await this.getArea(this.params.city.level,this.params.city.adcode);
				}
			},
			
			selectArea:async function(level,adcode,name){
				if(level=='province'){		
					this.citys=await this.getArea(level,adcode);
					this.area_type=2; 
					if(this.params.province.name!=name){
						console.log(123,level,adcode,name)
						this.params.province.level=level;
						this.params.province.adcode=adcode;
						this.params.province.name=name;
						this.params.city.name='';
						this.params.district.name='';
						console.log(456,this.params,this.params.province.name,this.params.city.name,this.params.district.name)
					} 
					if(name=='北京市'||name=='天津市'||name=='上海市'||name=='重庆市'||name=='香港'||name=='澳门'){   // 直辖市特殊处理
						this.params.city.level=level;
						this.params.city.adcode=adcode;
						this.params.city.name=name;
						this.params.city.show=false; 
					}else{						
						this.params.city.show=true;
					}
					
				}else if(level=='city'){
					this.districts=await this.getArea(level,adcode);
					this.area_type=3;
					if(this.params.city!=name){
						this.params.city.level=level; 
						this.params.city.adcode=adcode; 
						this.params.city.name=name; 
						this.params.district.name='';
					} 					
				}else if(level=='district'){  
					this.params.district.level=level;
					this.params.district.adcode=adcode; 
					this.params.district.name=name;				
				}					
			},
			
			// 取消
			cancle:function(){
				this.$emit('cancle')
			},
			
			// 确定
			confirm:function(){		 
				this.$emit('confirm',this.params)
			}
		},
		computed: {

		}


	}
</script>

<style lang="less">
	 
</style>
